<template>
  <div id="modify-dress" class="modify-dress-container transition-ease-slow">
    <form ref="newAddress" @submit.prevent="onSubmitAddress">
      <div class="modify-dress-content">
        <div class="clearfix head">
          <div class="fl editor-dress-title">{{this.$route.query.id ? '修改地址' : '新增地址'}}</div>
        </div>
        <w-form-validate @on-validate="onValidate">
          <!--收货人  -->
          <div class="form-group">
            <div class="col-sm-2">
              <w-label>收货人</w-label>
            </div>
            <div class="col-sm-9">
              <w-input v-model="trueName" rule="isEmpty" error="请输入收货人姓名" :maxlength="50"></w-input>
            </div>  
          </div>
          <!-- 手机号码 -->
          <div class="form-group">
            <div class="col-sm-2">
              <w-label>手机号码</w-label>
            </div>
            <div class="col-sm-9">
              <w-input v-model="mobile" rule="isEmpty|isMobile" error="请输入手机号|手机号码11位" :maxlength="11"></w-input>
            </div>  
          </div>
          <!-- 电话号码 -->
          <div class="form-group">
            <div class="col-sm-2">
              <w-label :must="false">电话号码</w-label>
            </div>
            <div class="col-sm-9 select-tel">
              <div class="telArea">
                <w-input v-model="telArea" :validate="false" :holder="'区号'"></w-input>
              </div>
              <div class="middle-x">-</div>
              <div class="telNumber">
                <w-input v-model="telNumber" :validate="false" :holder="'号码'"></w-input>
              </div>
            </div>  
          </div>
          <!-- 所在地区 -->
          <div class="form-group">
            <div class="col-sm-2">
              <w-label>所在地区</w-label>
            </div>
            <div class="col-sm-9">
              <div class="area">
                <w-input type="text" v-model="areaId" rule="isEmpty" error="请选择省市区"></w-input>
              </div>
              <div class="areapicker">
                <w-areapicker v-if="isAreaId" v-model="areaId" @change="areaId = ''"></w-areapicker>
              </div>
            </div>  
          </div>
          <!-- 详细地址 -->
          <div class="form-group">
            <div class="col-sm-2">
              <w-label>详细地址</w-label>
            </div>
            <div class="col-sm-9">
              <w-input v-model="areaInfo" class="textarea-error" type="textarea" error="请输入详细地址信息|详细地址5-100个字符" rule="isEmpty|between:5-100"></w-input>
            </div>  
          </div>
          <!-- 设为默认地址 -->
          <div class="form-group">
            <div class="col-sm-2"></div>
            <div class="col-sm-9">
              <w-checkbox v-model="defaultBool" label="default">设为默认地址</w-checkbox>
              <button type="submit" class="btn main btn-sure">确定</button>
            </div>  
          </div>
        </w-form-validate>
        
      </div>
    </form>
  </div>
</template>

<script>
  import { apiAddAddress, apiSelectAddressById, apiEditAddress } from 'js/api'

  export default {
    beforeRouteEnter(to, from, next) {
      next(vm => {
        // 获取queryId
        vm.editAddressId = to.query.id
        // 判断是新增还是修改地址
        if (vm.editAddressId) {
          apiSelectAddressById(vm.editAddressId).then(data => {
            const res = data.addressList[0] || null
            if (!res) {
              vm.$toast('暂无数据')
              return
            }
            const aTel = res.telephone ? res.telephone.split('-') : []
            vm.isAreaId = true
            vm.trueName = res.trueName
            vm.mobile = res.mobile
            vm.telArea = aTel[0] || ''
            vm.telNumber = aTel[1] || ''
            vm.areaId = `${res.provinceId}/${res.cityId}/${res.areaId}`
            setTimeout(() => {
              vm.$children[0].$children[12]._updateSelectList(vm.areaId)
            }, 30)
            vm.areaInfo = res.area_info
            vm.defaultBool = !!res.default_val
          })
        } else {
          vm.isAreaId = true
        }
      })
    },
    beforeRouteLeave(to, from, next) {
      this.$refs.newAddress.reset()
      this.$destroy()
      next()
    },
    data() {
      return {
        isAreaId: false, // 是否显示areapicker
        editAddressId: null, // 判断是否编辑或新增
        trueName: '',
        mobile: '',
        telArea: '',
        telNumber: '',
        areaId: '',
        areaInfo: '',
        defaultBool: false
      }
    },
    computed: {
      telephone() {
        return `${this.telArea}-${this.telNumber}`
      },
      defaultVal() {
        return this.defaultBool ? 1 : 0
      }
    },
    methods: {
      onValidate() { // 验证
        this.onSubmitAddress()
      },
      // 新增地址
      onSubmitAddress() {
        const token = this.$store.getters.token
        const addressParams = {
          trueName: this.trueName,
          mobile: this.mobile,
          telephone: this.telephone,
          areaId: this.areaId,
          areaInfo: this.areaInfo,
          defaultVal: this.defaultVal
        }
        if (this.editAddressId) { // 编辑地址
          apiEditAddress(token, {
            ...addressParams,
            id: this.editAddressId
          }).then(data => {
            this.$toast('修改成功', () => {
              this.$router.go(-1)
            })
          })
        } else { // 新增地址
          apiAddAddress(token, addressParams).then(data => {
            this.$toast('新增成功', () => {
              this.$router.go(-1)
            })
          })
        }
      }
    }
  }
</script>

<style lang="scss">
  .modify-dress-container {
    width: 1080px;
    padding-bottom: 20px;
    background: #fff;
    .col-sm-2 {
      text-align: right;
    }
    .head {
      line-height: 50px;
      margin-left: 20px;
      font-size: 14px;
    }
    .areapicker {
      position: absolute;
      top: 0;
      left: 15px;
    }
    .form-control {
      height: 30px;
      line-height: 30px;
    }
    textarea.form-control {
      height: 70px;
    }
    .select-tel {
      & > div {
        display: inline-block;
      }
      .telArea {
        width: 80px;
      }
      .telNumber {
        width: 150px;
      }
    }
    .area .form-control {
      opacity: 0;
    }
    .textarea-error {
      .error-tip {
        margin-top: 72px;
      }
    }
    .btn-sure {
      width: 100px;
      height: 30px;
    }
  }
</style>